<!-- 手机验证码 -->
<template>
	<view class="content" style="height: 100%;">
		<BaseNavBar :isnormal="false" title="手机号" />
		<view class="body" style="background-color: white;padding: 0 15px;overflow-y: auto;padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);flex: 1;">
			<view class='ver_phone_con'>
				<form>
					<view class='phone_verification'>
						<view class='ver_item'>
							<input type='number' class='phone_number' maxlength="11" :value="telNumber"
								@input="input_phone" placeholder='请输入手机号' />
							<!-- <button type="primary" formType="submit" class='get_phone_number' open-type="getPhoneNumber"
								bindgetphonenumber="getPhoneNumber">获取手机号</button> -->
						</view>
						<view class='last_phone_number  ver_item'>
							<input type='number' class='phone_number' maxlength="6" @input="input_code" :value='phone_code' placeholder='验证码' />
							<button type="primary" formType="submit" class='get_code' @click="getPhoneCode">{{login_VerifyCode}}</button>
						</view>
					</view>
					<button type="primary" formType="submit" class='page-btn' @click="submit_finish">提交</button>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getVcode,
		updateUserInfor
	} from '../../api'
	export default {
		data() {
			return {
				login_VerifyCode: '获取验证码',
				telNumber: '', // 用户手机号
				phone_code: '', // 手机验证码
				login_timer: true, // 
				codeFlag: false, // 获取过验证码
				snsMsgWait: 60,
			}
		},
		mounted() {
			let mobile = uni.getStorageSync("userInfo").mobile
			this.telNumber = mobile
			console.log(this.telNumber)
		},
		methods: {
			// 获取手机号码
			getPhoneNumber(){
				
			},
			// 获取手机验证码
			getPhoneCode: function() {
				if (this.login_VerifyCode == '获取验证码' || this.login_VerifyCode == '重新发送') {
					let telNumber = this.telNumber;
					console.log('获取验证码', telNumber.length);
					if (telNumber == '') {
						uni.showToast({
							title: '请输入手机号码',
							icon: 'none',
						});
					} else if (telNumber.length != 11) {
						uni.showToast({
							title: '请输入正确的手机号码',
							icon: 'none',
						});
					} else {
						let data = {
							mobile: this.telNumber
						}
						getVcode(data).then(res => {
							if(res.status == 200){
								console.log(res,'phone')
								this.phone_code= res.data
								this.count_down(this.snsMsgWait)
							} else {
								uni.showToast({
									title: '发送失败，请稍后再试',
									icon: 'none',
								});
							}
						})
					}
				}
			},
			
			// 倒计时 验证码
			count_down: function(total_micro_second) { //发送验证码按钮
				if (total_micro_second <= 0) {
					this.login_VerifyCode = "重新发送"
					// timeout则跳出递归
					return false;
				} else {
					uni.showToast({
						title: '验证码已发送',
						icon: 'none',
					});
					var inter = setInterval(function() {
						// 渲染倒计时时钟
						this.login_VerifyCode = total_micro_second + "s后重新发送"
						total_micro_second--;
						if (total_micro_second < 0) {
							clearInterval(inter)
							this.login_VerifyCode = '重新发送'
							this.snsMsgWait = 60
						}
					}.bind(this), 1000);
				}
			},
			// 输入框失去焦点   手机号
			input_phone: function(e) {
				this.telNumber = e.detail.value
			},
			// 输入框输入   验证码
			input_code: function(e) {
				this.phone_code = e.detail.value
			},
			submit_finish(){
				if(!this.telNumber){
					uni.showToast({
						title: '请输入手机号',
						icon:'none',
					})
					return
				} else if(this.codeFlag){
					uni.showToast({
						title: '请先获取验证码',
						icon:'none',
					})
					return
				}
				let userInfo = uni.getStorageSync('userInfo')
				let data = {
					id: userInfo.id,
					mobile: this.telNumber
				}
				updateUserInfor(data).then(res => {
					console.log('个人信息页===', res)
					if (res.status == 200) {
						uni.showToast({
							title: '保存成功',
						})
						setTimeout(()=>{
							uni.navigateBack()
						},500)
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	.ver_phone_con {
		.phone_verification {
			.ver_item {
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 60px;
				padding: 0 10px;
				border-bottom: 1rpx solid #ccc;
				box-sizing: border-box;
				font-size: 14px;

				button {
					background: none;
					font-size: 14px;
					color: #2456E0;
					margin: 0 0 0 auto;

					&::after {
						display: none;
					}
				}

				.get_phone_number {
					border: 1px solid #2456E0;
					background: #2456E0;
					color: #fff;
				}

				.get_code {
					border: none;
				}
			}
		}
		.page-btn{
			position: fixed;
			bottom: 50px;
			left: 50%;
			transform: translate(-50%,0);
		}
	}
</style>